
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>聊天记录 — Hyq 和 A金</title>
<meta property="og:title" content="聊天记录 — Hyq 和 A金"/>
<meta property="og:description" content="共 8 条消息"/>
<meta property="og:image" content="assets/thumbnail_300.png"/>
<meta property="og:type" content="website"/>
<style>
  :root{ --avatar:40px; --gap:8px; --padX:12px; --sep:#e5e5e5; --name:#555; --time:#999; --text:#111; }
  *{box-sizing:border-box;}
  body{ margin:0; background:#fff; color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; }
  .header{ text-align:center; padding:12px 0 4px 0; }
  .header-title{font-size:16px;font-weight:500;}
  .header-date{font-size:12px;color:#888;}
  .chat{padding:0;margin:0;}
  .msg{ position:relative; display:flex; align-items:flex-start; padding:6px var(--padX); }
  .msg::after{ content:""; position:absolute; height:1px; left:0; right:0; bottom:0; background:var(--sep); transform:translateY(0); }
  .avatar{width:var(--avatar);height:var(--avatar);border-radius:8px;object-fit:cover;margin-right:var(--gap);flex:0 0 var(--avatar);}
  .spacer{width:var(--avatar);height:var(--avatar);margin-right:var(--gap);flex:0 0 var(--avatar);}
  .content{flex:1; padding-bottom:3px;}
  .meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;}
  .name{font-size:12px;color:var(--name);}
  .time{font-size:11px;color:var(--time);white-space:nowrap;}
  .text{font-size:15px;line-height:1.45;color:var(--text);word-break:break-word;}
  a{color:#2a66d9;text-decoration:none;}
</style>
</head>
<body>
  <div class="header">
    <div class="header-title">Hyq 和 A金的聊天记录</div>
    <div class="header-date">2025年9月16日</div>
  </div>
  <div id="chat" class="chat"></div>
<script>
const TITLE = "Hyq 和 A金的聊天记录";
const DATE_TITLE = "2025年9月16日";
const messages = [
  {id:1, sender:'hyq', name:'Hyq', avatar:'assets/hyq.png', text:'你给我发一下', time:'20:49'},
  {id:2, sender:'hyq', name:'Hyq', avatar:'assets/hyq.png', text:'随便发一些消息', time:'20:49'},
  {id:3, sender:'ajin', name:'A金 (阚哥)', avatar:'assets/ajin.png', text:'好', time:'20:50'},
  {id:4, sender:'hyq', name:'Hyq', avatar:'assets/hyq.png', text:'对，只要信息', time:'20:50'},
  {id:5, sender:'ajin', name:'A金 (阚哥)', avatar:'assets/ajin.png', text:'我们聊天', time:'20:50'},
  {id:6, sender:'ajin', name:'A金 (阚哥)', avatar:'assets/ajin.png', text:'是吗', time:'20:50'},
  {id:7, sender:'hyq', name:'Hyq', avatar:'assets/hyq.png', text:'24.50.68.28.24.11.33', time:'20:51', link:true},
  {id:8, sender:'hyq', name:'Hyq', avatar:'assets/hyq.png', text:'各 500', time:'20:51'}
];
document.querySelector(".header-title").textContent = TITLE;
document.querySelector(".header-date").textContent = DATE_TITLE;
const ogDesc = document.querySelector('meta[property="og:description"]');
if (ogDesc) ogDesc.setAttribute('content', `共 ${messages.length} 条消息`);
const root = document.getElementById('chat');
let prevSender = null;
messages.forEach(m => {
  const wrap = document.createElement('div'); wrap.className='msg';
  if (m.sender !== prevSender){ const img=document.createElement('img'); img.className='avatar'; img.src=m.avatar||'assets/placeholder.png'; img.alt=m.name||''; wrap.appendChild(img); }
  else { const spacer=document.createElement('div'); spacer.className='spacer'; spacer.setAttribute('aria-hidden','true'); wrap.appendChild(spacer); }
  prevSender = m.sender;
  const content=document.createElement('div'); content.className='content';
  const meta=document.createElement('div'); meta.className='meta';
  const name=document.createElement('div'); name.className='name'; name.textContent=m.name||'';
  const time=document.createElement('div'); time.className='time'; time.textContent=m.time||'';
  meta.appendChild(name); meta.appendChild(time);
  const text=document.createElement('div'); text.className='text';
  if(m.link){ const a=document.createElement('a'); a.href='#'; a.textContent=m.text; text.appendChild(a);} else { text.textContent=m.text||''; }
  content.appendChild(meta); content.appendChild(text);
  wrap.appendChild(content);
  root.appendChild(wrap);
});
function adjustSeparators(){
  document.querySelectorAll('.msg').forEach(msg => {
    const content = msg.querySelector('.content');
    const time = msg.querySelector('.time');
    if(!content || !time) return;
    const msgRect = msg.getBoundingClientRect();
    const contentRect = content.getBoundingClientRect();
    const timeRect = time.getBoundingClientRect();
    const left = Math.max(contentRect.left - msgRect.left, 0);
    const rightPadding = Math.max(msgRect.right - timeRect.right, 0);
    msg.style.setProperty('--sep-left', left + 'px');
    msg.style.setProperty('--sep-right', rightPadding + 'px');
  });
}
window.addEventListener('load', () => {
  const style=document.createElement('style');
  style.textContent = `.msg::after{ left: var(--sep-left, 60px); right: var(--sep-right, 12px); }`;
  document.head.appendChild(style);
  adjustSeparators();
});
window.addEventListener('resize', adjustSeparators);
</script>
</body>
</html>
